<template>
    <div class="select_city" v-loading="city.length < 1">
        <div class="select_city_header">
            <div class="select_city_label">
                <p>配送至</p>
                <p>请选择</p>
            </div>
            <p class="select_city_submit" @click="submitArea">确定</p>
        </div>
        <div class="option">
            <div class="left-option">
                <ul>
                    <li class="city" v-for="(item,index) in city" @click="handleCity(index,item.city_name)">
                        {{item.city_name}}
                    </li>
                </ul>
            </div>
            <div class="center-option">
                <ul v-if="second">
                    <li class="c-c-city" v-for="(item,index) in secondCity"
                        @click="handleChildrencity(index,item.city_name,item.city_id)">{{item.city_name}}
                    </li>
                </ul>
            </div>
            <div class="right-option">
                <ul v-if="third">
                    <li class="childrenCity" v-for="(item,index) in thirdCity"
                        @click="handleC_c_city(index,item.city_name,item.city_id)">{{item.city_name}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import http from '../libs/http'
    export default {
        name: 'select_area',
        data(){
            return{
                city: [],
                childrenCity: [],
                secondCity: [],
                c_cCity: [],
                thirdCity: [],
                second: false,
                third: false,
                option: true,
                p: '',
                s: '',
                q: '',
                contact_city: '',
            }
        },
        mounted() {
            this.apiGet('city/lists?mode=list').then((res)=>{
                console.log(res)
                var length = res.length;
                this.city = [];
                for (var i = 0; i < length; i++) {
                    if (res[i].level === 0) {
                        this.city.push(res[i])
                    }
                    if (res[i].level === 1) {
                        this.childrenCity.push(res[i])
                    }
                    if (res[i].level === 2) {
                        this.c_cCity.push(res[i])
                    }
                }
            })
        },
        methods:{
            handleCity(index, province) {
                this.secondCity = [];
                this.second = false;
                this.third = false;
                this.p = '';
                this.s = '';
                this.q = '';
                this.contact_city = '';
                var length = this.childrenCity.length;
                for (var j = 0; j < length; j++) {
                    if (this.childrenCity[j].name_relation[0] === province) {
                        this.secondCity.push(this.childrenCity[j])
                    }
                }
                var city = document.getElementsByClassName('city');
                for (let i = 0; i < city.length; i++) {
                    if (i === index) {
                        city[i].classList.add('left-active');
                        this.p = province;
                    } else {
                        city[i].classList.remove('left-active');
                    }
                }
                var city1 = document.getElementsByClassName('c-c-city');
                for (let i = 0; i < city1.length; i++) {
                    city1[i].classList.remove('right-active');
                }
                if (this.secondCity) {
                    this.second = true;
                }

            },
            handleChildrencity(index, s, id) {
                this.thirdCity = [];
                this.contact_city = '';
                this.third = false;
                this.q = '';
                var city = document.getElementsByClassName('c-c-city');
                for (let i = 0; i < city.length; i++) {
                    if (i === index) {
                        city[i].classList.add('right-active');
                        this.s = s;
                    } else {
                        city[i].classList.remove('right-active');
                    }
                }
                var length = this.c_cCity.length;
                for (var j = 0; j < length; j++) {
                    if (this.c_cCity[j].name_relation[1] === s) {
                        this.thirdCity.push(this.c_cCity[j])
                    }
                }
                var city1 = document.getElementsByClassName('childrenCity');
                for (let i = 0; i < city1.length; i++) {
                    city1[i].classList.remove('right-active');
                }
                if (this.thirdCity.length > 0) {
                    this.third = true;
                } else {
                    // this.form.area = this.p + ' ' + this.s;
                    this.third = false;
                    this.contact_city = id;
                }
                this.contact_city = id;
            },
            handleC_c_city(index, item, id) {
                this.contact_city = '';
                var city = document.getElementsByClassName('childrenCity');
                for (let i = 0; i < city.length; i++) {
                    if (i === index) {
                        city[i].classList.add('right-active');
                        this.q = item;
                        this.contact_city = id;
                    } else {
                        city[i].classList.remove('right-active');
                    }
                }
            },
            submitArea() {
                if (this.p && !this.s) {
                    this.$message.error('请选择城市');
                } else if (!this.q) {
                    let area = this.p + ' ' + this.s;
                    this.$emit('on-handle-city',area,this.contact_city)
                } else if (this.q && this.contact_city) {
                    let area = this.p + ' ' + this.s + ' ' + this.q;
                    this.$emit('on-handle-city',area,this.contact_city)
                }
            },
        },
        mixins:[http]
    }
</script>

<style lang="stylus">
    .select_city
        position fixed
        left 0
        bottom 0;
        width 100%
        height 90vh;
        z-index 2
        background-color white
        .select_city_header
            height 70px
            display flex
            box-sizing border-box
            padding 13px 20px 10px 20px
            justify-content space-between
            border-bottom 1px solid #E6E6E6
            .select_city_label
                text-align left
                p:nth-child(1)
                    font-size:19px;
                    margin-bottom 15px
                    color:rgba(51,51,51,1);
                p:nth-child(2)
                    font-size:13px;
                    color:rgba(153,153,153,1);
            .select_city_submit
                font-size 15px
                color:rgba(36,191,255,1);
        .option
            width: 100%;
            height: 100%;
            .left-option
                width: 114px;
                height: 100%;
                background: #fff;
                position: fixed;
                left: 0;
                overflow-y: auto;
                ul
                    text-align: center;
                    color: #656565;
                    font-size: 15px;
                    li:nth-child(1)
                        margin-top: 14px;
                    li
                        margin: 23px 0;
                    .left-active
                        border-left: 0.05rem solid #00B4EF;
                        color: #24BFFF;

            .center-option
                width: 131px;
                height: 100%;
                background: #F7F7F7;
                position: fixed;
                left: 114px;
                overflow-y: auto;
                ul
                    text-align: center;
                    color: #656565;
                    font-size: 15px;
                    li:nth-child(1)
                        margin-top: 14px;

                    li
                        margin: 23px 0
                    .right-active
                        color: #24BFFF;
            .right-option
                width: 130px;
                height: 100%;
                background: #F2F2F2;
                position: fixed;
                left: 245px;
                overflow-y: auto;
                ul
                    text-align: center;
                    color: #656565;
                    font-size: 15px;
                    li:nth-child(1)
                        margin-top: 0;
                        padding-top: 14px;
                    li
                        margin: 23px 0;
                    .right-active
                        color: #24BFFF;
</style>